嘿！设计师 | 让程序猿爱上设计狮的icon-font是怎么做的？
文章较长，边听边看。
这是一篇旧文，今天补充了一些内容，再次推送，希望能帮到你。
话说在很久以前，前端的小伙伴要在网页上放一些小icon，就要找设计师去设计，然后再切成一个一个的小图片。最后前端再写代码引用这个图片，通过CSS去控制它的大小、位置等。可是突然某一天老板说我们网站换个颜色吧！于是设计狮呼哧呼哧地重新把这套icon改个颜色再给前端发一遍，前端把所有图片都替换一遍。
好像还不是很麻烦。但要是老板是个多变小能手呢？老板说我们网站每个月换个色调！估计设计师和前端们都会哭的。但是现在有一套方案，即使老板一天一换也不怕，说不定还能让前端爱上设计师，这就是icon-font。简单来说，就是把网站上用的一套icon变成字体，程序猿在使用时就像控制文本一样，随意改变它的颜色、大小、阴影等。
相比于图片，icon-font具有如下优点：
1、矢量特性，放再大都不模糊。
2、除了大小、位置等属性，颜色、阴影等文字才具有的属性也可以使用。
3、整体管理，方便维护更新。
我们把网站视图放大到200%，比较一下图片图标和字体图标的效果区别：
站酷：用图片做的图标
简书：用icon-font做的图标
下面icon-font大法开始：
我们的设计制作过程很简单，分这么几个步骤：
1、用设计软件制作图标，导出svg格式。
2、使用https://icomoon.io/app/提供的在线生成工具生成。
3、打包下载，给前端小伙伴使用。
好了，下面我们一起来设计制作一套icon-font吧。
step1：
用矢量软件设计制作图标（必须使用封闭曲线，不能使用描边路径），导出svg格式。这个设计师比我懂，我就不细说啦，值得注意的是生成时命名按照图标的样子使用英文命名，比如这个图标
step2：
好了，假设现在你已经做完了一套svg图标，接下来要做的就是上传到 https://icomoon.io/app/。如下图，点击网站左上角紫色的Import Icons按钮，选择svg文件（支持同时选择多个）上传即可。
打开网站，导入svg
我上传了一张苹果logo的svg图像，它就会显示在下面。你要是选择多张，这里就会显示多张你上传的svg图片。
导入后就会显示在下面
你可能会注意到在Import Icons按钮右侧有四个按钮，它们分别对应的是：选择、删除、移动排序、编辑。比较奇怪的是这些操作需要先选中操作按钮，再选中需要操作的图标才起作用。一般我会用到编辑，把图标放大到顶边，或者修改名称等。名称一般会默认前面你自己命名的文件名，在这里也可以修改。
对图标进行编辑
step3：
好了，如果前面都没有问题，开始生成字体吧。Grenerate Font按钮在网页底部最右边，选中要生成字体的图标，点击Grenerate Font即可。底部中间的Selection(4)会显示你选中了几个图标，也就是最终你的字体有几个“字”。
生成按钮
现在我们会进入到这个页面，里面会有你选中的图标。网页底部右侧有一个Download按钮，本来直接点击就可以生成一套字体了，但是我们还要多做一步：点击Download按钮右边的齿轮图标，进行一些设置。
预览页面
如下图，你可以进行一些设置。Font Name是你自己设计的这一套字体名称，就是类似于“微软雅黑”这种字体名称，不过建议用英文；Class Prefix是前缀，在代码中是css类的统一前缀，默认是“icon-”，你可以更改成其它的，但建议和字体名称有关联；下面的如有不懂就问问你家前端吧。
整体设置
设置完成之后关掉弹层，点击Download下载，会下载一个以字体名称命名的压缩包，解压后在里面会看到如下文件：
生成的打包文件
剩下的就交给前端小伙伴了，记得把这些文件给他时，要假装毫不在意地说：“给你一份iconfont，以后用到的地方你就对应着写class就行了，不给你切图了。”相信我，他会爱上你的。
css代码
注意事项：
1、其实，你所做的工作，就是设计了一套字体，这些图标都是一个个的字，所以它的本质是字体。
2、在icomoon上编辑单个字体时，不用把每个图标都放大到顶边，要按照每个字之间的大小关系来，就好比常见字体中中“+”和“%”的显示大小就是不一样的。